<template>
  <div>
    <nav-bar v-show="navShow" :position="'sticky'" :isShadow="true"></nav-bar>
    <!-- <div id="menu" class="hover_animation menu_open" data-mark="false">
      <span></span>
      <span></span>
      <span></span>
    </div> -->
    <div class="banner" id="banner">
      <div class="content wow bounceIn">
        <h1>Smile Every Day</h1>
        <p>远方！那是梦的方向</p>
        <div @click="scroll" class="layui-btn layui-btn-normal">Enter Blog</div>
      </div>
    </div>
    <section>
      <div class="main flex justify-between">
        <div class="introduce wow fadeInLeft">
          <Title :title="'个人介绍'" :is_link="false"></Title>
          <div class="flex margin-top-bg">
            <img src="../assets/images/banner/index.jpg" />
            <div class="flex-sub relative">
              <div class="introduce_content">
                大家好！欢迎来到我的个人主页！<br />
                <!-- 先简单自我介绍一下：<br/> -->
                我是smile，你们可以叫我“阿感”，因为学生时期一直被这么称呼，来自河南开封，90后（其实是末班车）<br />
                最大的爱好是吃，最想做的事情是与某人看烟花，愿望是希望每天都会快乐...<br />
              </div>
              <div class="opertion flex justify-between absolute ab_bottom">
                <div>了解更多</div>
              </div>
            </div>
          </div>
        </div>
        <div class="dynamic wow fadeInRight">
          <Title :title="'博客'"></Title>
          <div class="dynamic_content margin-top-sm">
            <div
              v-for="(item, index) in 4"
              :key="index"
              class="dynamicItem flex justify-between pointer"
            >
              <div class="ellipsis">
                快乐最重要快乐最重要快乐最重要快乐最重要...
              </div>
              <div>2020-11-10</div>
            </div>
          </div>
        </div>
      </div>
      <div class="project">
        <Title :title="'个人项目展示'" :is_link="true" path="/project"></Title>
        <div class="flex justify-between margin-top-bg">
          <div
            class="item pointer wow fadeInUp"
            v-for="(item, index) in projectList"
            :key="index"
            @click="openUrl(index)"
          >
            <img :src="item.img_url" alt="" />
            <div class="title">{{ item.name }}</div>
            <div class="describe ellipsis3">{{ item.describe }}</div>
          </div>
        </div>
      </div>
    </section>
    <section id="section1">
      <div class="fp-tablecell">
        <div class="page3">
          <div class="warp-box">
            <div class="warp">
              <div class="inner">
                <div class="links">
                  <ul>
                    <li class="wow fadeInLeft"><a href="#">暂时还没想好</a></li>
                    <li class="wow fadeInRight">
                      <a href="#">暂时还没想好</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <footbar></footbar>
  </div>
</template>
<script>
import { WOW } from "wowjs";
import NavBar from "@/components/nav/index";
import footbar from "@/components/footbar/index";
import Title from "@/components/title/index";
import $ from "jquery";
import { getProjectList } from "@/api/projectApi.js";
export default {
  name: "index",
  components: { Title, footbar, NavBar },
  data() {
    return {
      projectList: [],
      navShow: false,
    };
  },
  mounted() {
    this.getProjectList();
    let firstPageHeight = this.windowSysInfo.bhig;
    window.addEventListener("scroll", () => {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop > firstPageHeight) {
        this.navShow = true;
      } else {
        this.navShow = false;
      }
    });
    this.$store.commit("activeIndexChange", 0);
    this.$nextTick(() => {
      var wow = new WOW({
        live: false,
      });
      wow.init();
    });
  },
  methods: {
    async getProjectList() {
      let {
        data: { list },
      } = await getProjectList();
      let projectList = list.filter((item, index) => {
        return index <= 5;
      });
      this.projectList = projectList;
    },
    openUrl(index) {
      if (this.projectList[index].href) {
        window.open(this.projectList[index].href);
      }
    },
    scroll() {
      $("html,body").animate(
        {
          scrollTop: $("#banner").outerHeight() + 1,
        },
        600
      );
    },
  },
};
</script>
<style>
#app {
  position: relative;
}
</style>
<style scoped>
.banner {
  width: 100%;
  height: 100vh;
  background-color: transparent;
  background-image: url("../assets/images/banner/index.jpg");
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  display: table;
}
.banner .content {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
}
.banner .content p {
  letter-spacing: 10px;
  margin: 20px 0;
}
.banner .content .layui-btn {
  margin-top: 20px;
  display: inline-block;
  height: 38px;
  line-height: 38px;
  padding: 0 18px;
  background-color: #1e9fff;
  white-space: nowrap;
  text-align: center;
  font-size: 14px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}
.banner .content .describe {
  font-size: 20px;
  color: #ffffff;
  line-height: 30px;
  height: 64px;
  overflow-y: auto;
  margin: 30px 0;
  letter-spacing: 2px;
}
.banner .content .about {
  width: 174px;
  height: 49px;
  border: 2px solid #ffffff;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  line-height: 49px;
  margin: 0 auto;
  cursor: pointer;
}
section {
  background: #f4f4f4;
  padding: 50px 0;
}
section > div {
  margin-bottom: 50px;
}
section > .project {
  width: 1140px;
  padding: 30px 30px 17px 30px;
  margin: 0 auto;
  background: #ffffff;
}
/* 公司简介 */
section .introduce {
  width: 680px;
  background: #ffffff;
  padding: 30px;
}
.introduce_content {
  width: 350px;
  font-size: 14px;
  font-weight: 400;
  color: #737373;
  line-height: 26px;
  margin: 0 auto;
}
.introduce .opertion {
  width: 100%;
  margin: 0 auto;
  left: 17px;
  display: flex;
}
.introduce .opertion div {
  margin: 0 auto;
}
.introduce img {
  width: 240px;
  height: 199px;
  object-fit: cover;
}
.opertion > div {
  width: 116px;
  height: 43px;
  background: #1e9fff;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  line-height: 43px;
  text-align: center;
  cursor: pointer;
}
/* 公司动态 */
section .dynamic {
  width: 350px;
  padding: 30px;
  background: #ffffff;
}
section .dynamic .dynamicItem {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  padding: 20px 0;
  border-bottom: 1px solid #e5e5e5;
}
section .dynamic .dynamicItem:last-child {
  border: none;
}
section .dynamic .dynamicItem > div:nth-child(1) {
  width: 210px;
}
.flex {
  flex-wrap: wrap;
}
.item {
  width: 344px;
  border: 1px solid #eeeeee;
  margin-bottom: 40px;
}
.item > img {
  width: 344px;
  height: 206px;
  object-fit: cover;
}
.item .title {
  width: 291px;
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  margin: 18px auto;
  text-align: left;
}
.item .describe {
  width: 291px;
  font-size: 14px;
  font-weight: 400;
  margin: 0 auto 18px;
  color: #999999;
  line-height: 24px;
}
#section1 {
  padding: 160px 0;
  background-image: url("../assets/images/banner/229917.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  overflow: hidden;
  display: table;
  table-layout: fixed;
  width: 100%;
  position: relative;
}
.fp-tablecell {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
.page2,
.page3,
.page4,
.page5 {
  width: 90%;
  position: relative;
  margin: 0 auto;
  padding-top: 0.1px;
  font-family: "Microsoft YaHei";
}
.warp-box {
  width: 100%;
  height: 100%;
  position: relative;
}
.warp {
  display: table;
  margin: 0 auto;
  height: 100%;
  position: relative;
}
.page3 .inner {
  text-align: center;
}
.page3 .links li {
  display: inline-block;
  width: 200px;
  height: 46px;
  margin: 10px;
  border: 1px solid #b4b4b4;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.6s linear;
  transition: all 0.6s linear;
  position: relative;
  text-align: center;
  overflow: hidden;
}
.page3 .links li a {
  display: block;
  line-height: 26px;
  padding: 10px;
  text-align: center;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  -webkit-transition: all 0.6s linear;
  transition: all 0.6s linear;
  position: relative;
  z-index: 1;
}
.menu_close,
.menu_open {
  position: fixed;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  right: 55px;
  top: 40px;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.1);
  overflow: hidden;
  z-index: 102;
}
.menu_open span:first-child {
  margin-top: 12px;
}
.menu_close span,
.menu_open span {
  display: block;
  background: #fff;
  width: 26px;
  height: 2px;
  line-height: 10px;
  margin: 0 auto;
  margin-top: 5px;
}
.menu_close:hover,
.menu_open:hover {
  background: #6bc30d;
}
.hover_animation {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
</style>
